<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>所有状态的订单</title>
</head>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<script src="js/jquery1.42.min.js"></script>
<script src="js/TouchSlide.1.1.js"></script>
<style type="text/css">

</style>
<body class="all-status-orders">

<!--头部-->
<!--<header >
    <div class="title"><a class="nav-btn" href="index.html"></a><span>我的订单</span></div>
</header>-->

<div id="content">
    <!-- 本例主要代码 Start ================================ -->
    <div id="leftTabBox" class="tabBox">
        <div class="hd">
            <ul>
                <li><a href="#">全部</a></li>
                <li><a href="#">待支付</a></li>
                <li><a href="#">进行中</a></li>
                <li><a href="#">已完成</a></li>
                <li><a href="#">已取消</a></li>
            </ul>
        </div>
        <div class="bd">
            <!--全部订单-->
            <ul>
                <li >
                        <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                            <span class="order-status" style="color: rgb(51, 51, 51);">进行中(到店支付)</span>
                        </div>
                        <div  class="appoint-order-detail">
                            <img src="img/drama4.png"/>
                            <div class="order-detail-box">
                                <div class="order-name ">话剧——无风地带</div>
                                <div class="order-summary ">《无风地带》以殖民统治时期。《无风地带》以殖民统治时期。《无风地带》以殖民统治时期。《无风地带》以殖民统治时期。</div>
                                <div class="order-price-wrap">
                                    <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>
                                    <span class="original-price">￥1</span>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-footer">
                            <button class="order-btn cancel-btn">取消预约</button>
                        </div>
                </li>

                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">已完成</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/drama7.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>

                            </div>
                        </div>
                    </div>
                </li>

                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">已取消</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>

                            </div>
                        </div>
                    </div>
                </li>

            </ul>
            <!--待支付订单-->
            <ul>
                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">待支付</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>
                                <span class="original-price">￥1</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-item-footer">
                        <button class="order-btn cancel-btn">取消预约</button>
                        <button class="order-btn complete-btn" style="color: rgb(51, 51, 51); border-color: rgb(51, 51, 51);">去支付</button>
                    </div>
                </li>
            </ul>
            <!--进行中订单-->
            <ul>
                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">进行中(到店支付)</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>
                                <span class="original-price">￥1</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-item-footer">
                        <button class="order-btn cancel-btn">取消预约</button>
                    </div>
                </li>


                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">退款中</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
            <!--已完成订单-->
            <ul>
                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">已完成</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>

                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!--已取消订单-->
            <ul>
                <li >
                    <div class="appoint-order-head"><span>订单号：<i>20171024</i></span>
                        <span class="order-status" style="color: rgb(51, 51, 51);">已取消</span>
                    </div>
                    <div  class="appoint-order-detail">
                        <img src="img/liulaolao.jpg"/>
                        <div class="order-detail-box">
                            <div class="order-name ">话剧——无风地带</div>
                            <div class="order-summary ">《无风地带》以殖民统治时期。</div>
                            <div class="order-price-wrap">
                                <span class="selling-price" style="color: rgb(51, 51, 51);">￥9999</span>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <script type="text/javascript">

        $(function () {

            //获取上个界面传过来的游戏ID
            function getGameId(){
                //获取上个界面传来的id
                var loc = location.href;
                var n1 = loc.length;
                var n2 = loc.indexOf('=');
                id = loc.substr(n2+1,n1-n2); //游戏id
                return id ;
            }

            var index = getGameId() ;
            console.log("******") ;
           if (/^\d+$/.test(index)){
               index = getGameId() ;
            }else{
                index = 0 ;//默认选择‘全部’
            }

            TouchSlide({ slideCell:"#leftTabBox",defaultIndex:index});


            $(".bd li").click(function(){
                window.location.href = "orderdetail.html"
            }) ;

            $(".hd ul").eq(2).trigger('click') ;
        })
    </script>

</div>


</body>
</html>

